<template>
    <div class="PromCard">
        <div class="card" :style="not" v-if="true">
            <div class="img">
                <!--<img src="../../assets/img/PunchCard/invalid-name@2x.png" alt="">-->
                <img :src="img" alt="">
            </div>
            <div class="div"><p>长按图片保存发送给好友</p></div>
            <div class="foot">
                <div @click="selected(i)" v-for="(a,i) in items.recommend_image_url">
                    <img :src="a.icon" alt="">
                    <span v-if="sele===i"><i class="iconfont icon-xuanzhong"></i></span>
                </div>
            </div>
        </div>
        <!--<div class="popup" v-if="showPrompt" @click="hides($event,1)">-->
        <!--<div class="content" @click="stopPropagation">-->
        <!--<PromptPopup v-on:hide="hidePrompt" :num="themeSignDays"></PromptPopup>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="popups" v-if="outPopup" @click="hides($event,3)">-->
        <!--<div class="content" @click="stopPropagation">-->
        <!--<OutPopup v-on:hide="hideOut"></OutPopup>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="positive" v-if="sharePrompt" @click="hides($event,2)">-->
        <!--<div class="content" @click="stopPropagation">-->
        <!--<SharePopup></SharePopup>-->
        <!--</div>-->
        <!--</div>-->
        <canvas ref="canvas" v-show="false"></canvas>
        <canvas ref="QRCode" v-show="false"></canvas>
    </div>
</template>

<script>
    import QRCode from 'qrcode'
    import {Indicator, Toast} from 'mint-ui'

    export default {
        name: 'index',
        data: function () {
            return {
                not: {
                    backgroundImage: 'url(' + require('../../assets/img/PunchCard/bgname@3x2.png') + ')'
                },
                multiple: 1,
                items: {},
                Qr: '',
                sele: 0,
                img: require('../../assets/img/PromCard/make.gif'),
                bgimg: ''
            }
        },
        mounted: function () {
            var data = {
                post_id: this.$route.query.goods_id || -1,
                share_type: 22,
                share_page: 'BuyVip'
            }
            this.updata(data)
            // if (this.$route.query.goods_id > 0) {
            //   this.bgimg = require('../../assets/img/newcard/1.jpg')
            // } else {
            //   this.bgimg = require('../../assets/img/PromCard/Newbear/card/1.jpg')
            // }
        },
        methods: {
            updata: function (data) {
                var _this = this
                this.$axios.share_link_info(data).then(res => {
                    res.data.qing_data.recommend_image_url = JSON.parse(res.data.qing_data.recommend_image_url)
                    this.items = res.data.qing_data
                    this.bgimg = res.data.qing_data.recommend_image_url[0].card
                    var goods = this.$route.query.goods_id || -1
                    var data = {
                        title: res.data.qing_data.title,
                        desc: res.data.qing_data.desc,
                        link: res.data.qing_data.link + '&goods_id=' + goods,
                        imgUrl: res.data.qing_data.img
                    }
                    var obj = {}
                    obj.share_id = res.data.qing_data.share_id
                    obj.share_token = res.data.qing_data.share_token
                    this.$wx.ShareTimeline(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 22
                        _this.share_done(obj)
                    })
                    this.$wx.ShareAppMessage(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 22
                        _this.share_done(obj)
                    })
                    this.Qr = this.$refs.QRCode
                    QRCode.toCanvas(this.Qr, document.location.protocol + '//' + window.location.host + '/TenVip/index.html#' + res.data.qing_data.link.split('#')[1] + '&goods_id=' + goods, function (error) {
                        if (error) return
                    })
                    this.init()
                })
            },
            share_done: function (obj) {
                this.$axios.share_done(obj).then(res => {
                    if (res.data.qing_code !== 100) {
                        Toast({
                            message: '分享失败',
                            iconClass: 'iconfont icon-bangdingshibai',
                            duration: 5000
                        })
                    } else {
                        Toast({
                            message: '分享成功',
                            iconClass: 'iconfont icon-tianjiachenggong',
                            duration: 5000
                        })
                    }
                })
            },
            init: function () {
                var canvas = this.$refs.canvas
                var ctx = canvas.getContext('2d')
                var width = 1080 * this.multiple
                var heigth = 1921 * this.multiple
                this.$refs.canvas.width = width
                this.$refs.canvas.height = heigth
                var obj = {
                    x: 0,
                    y: 0,
                    width: width,
                    heigth: heigth
                }
                this.newimg(ctx, this.bgimg, obj)
            },
            newimg: function (ctx, url, obj) {
                var textobj
                var _this = this
                var img = new Image()
                img.crossOrigin = '*'
                img.src = url
                img.onload = function () {
                    ctx.drawImage(img, obj.x, obj.y, obj.width, obj.heigth)
                    ctx.drawImage(_this.Qr, 115.2 * _this.multiple, 1533.6 * _this.multiple, 286.6 * _this.multiple, 286.6 * _this.multiple)
                    img = new Image()
                    img.crossOrigin = '*'
                    img.src = _this.items.user_info.avatar
                    img.onload = function () {
                        //   // ctx.drawImage(img, obj.x, obj.y, obj.width, obj.heigth)
                        ctx.beginPath()
                        ctx.save()
                        ctx.createPattern(img, 'no-repeat')
                        ctx.strokeStyle = '#fff'
                        ctx.lineWidth = '10'
                        ctx.arc(552 * _this.multiple, 554 * _this.multiple, 90 * _this.multiple, 0, 2 * Math.PI, false)
                        ctx.stroke()
                        ctx.arc(552 * _this.multiple, 554 * _this.multiple, 90 * _this.multiple, 0, 2 * Math.PI)
                        ctx.shadowBlur = 40
                        ctx.shadowColor = 'black'
                        ctx.fillStyle = 'blue'
                        ctx.clip()
                        ctx.drawImage(img, 463 * _this.multiple, 460 * _this.multiple, 185 * _this.multiple, 185 * _this.multiple)
                        ctx.fillStyle = 'transparent'
                        ctx.fill()
                        ctx.restore()
                        textobj = {
                            x: 545,
                            y: 710.6,
                            color: '#fff',
                            content: _this.items.user_info.nickname + '在「十分读书」',
                            Baseline: 'top',
                            Align: 'center',
                            globala: 1,
                            font: '400 43.2px Arial'
                        }
                        _this.newtext(ctx, textobj)
                        textobj = {
                            x: 545,
                            y: 786.4,
                            color: '#fff',
                            content: '邀请您一起感受阅读之美～',
                            Baseline: 'top',
                            globala: 1,
                            font: '400 43.2px Arial'
                        }
                        _this.newtext(ctx, textobj)
                        // textobj = {
                        //   x: 548.5,
                        //   y: 835.2,
                        //   color: '#fff',
                        //   content: '累计阅读',
                        //   Baseline: 'top',
                        //   globala: .7,
                        //   font: '400 54px Arial'
                        // }
                        // _this.newtext(ctx, textobj)
                        // textobj = {
                        //   x: 543.5,
                        //   y: 948.6,
                        //   color: '#fff',
                        //   content: '第 ' + _this.items.user_info.read_days + ' 天',
                        //   Baseline: 'top',
                        //   globala: 1,
                        //   font: '400 90px Arial'
                        // }
                        // _this.newtext(ctx, textobj)
                        // textobj = {
                        //   x: 820,
                        //   y: 1147.7,
                        //   color: '#fff',
                        //   content: '外教领读，每天阅读全返学费',
                        //   Baseline: 'top',
                        //   globala: .7,
                        //   Align: 'right',
                        //   font: '400 43.2px Arial'
                        // }
                        // _this.newtext(ctx, textobj)
                        // textobj = {
                        //   x: 820,
                        //   y: 1207.7,
                        //   color: '#fff',
                        //   content: '双重惊喜，实体书籍包邮赠送',
                        //   Baseline: 'top',
                        //   globala: .7,
                        //   Align: 'right',
                        //   font: '400 43.2px Arial'
                        // }
                        // _this.newtext(ctx, textobj)
                        textobj = {
                            x: 541.2,
                            y: 1611.2,
                            color: '#000',
                            content: _this.items.discount.split('|')[0],
                            Baseline: 'top',
                            globala: .7,
                            Align: 'left',
                            font: '400 51.84px Arial'
                        }
                        _this.newtext(ctx, textobj)
                        textobj = {
                            x: 541.2,
                            y: 1691.2,
                            color: '#000',
                            content: _this.items.discount.split('|')[1],
                            Baseline: 'top',
                            globala: .7,
                            Align: 'left',
                            font: '400 51.84px Arial'
                        }
                        _this.newtext(ctx, textobj)
                        _this.saveImageInfo()
                        //   }
                        //   // }
                        // }
                        // var obj = {
                        //   x: 0,
                        //   y: 0
                    }
                    // _this.avatarimg(ctx, _this.Cardimg, obj)
                }
            },
            newtext: function (ctx, textobj) {
                var txet = textobj.content
                ctx.fillStyle = textobj.color
                ctx.textBaseline = textobj.Baseline
                ctx.font = textobj.font
                ctx.textAlign = textobj.Align || ''
                ctx.globalAlpha = textobj.globala
                ctx.fillText(txet, textobj.x, textobj.y)
            },
            saveImageInfo: function () {
                var mycanvas = this.$refs.canvas
                var context = mycanvas.getContext('2d')
                context.scale(2, 2)
                this.img = mycanvas.toDataURL('image/jpg')
                Indicator.close()
            },
            selected: function (num) {
                this.img = require('../../assets/img/PromCard/make.gif')
                this.sele = num
                this.bgimg = this.items.recommend_image_url[num].card
                this.init()
                // switch (num) {
                //   case 1:
                //     if (this.$route.query.goods_id > 0) {
                //       this.bgimg = require('../../assets/img/newcard/1.jpg')
                //     } else {
                //       this.bgimg = require('../../assets/img/PromCard/Newbear/card/1.jpg')
                //     }
                //     // this.bgimg = require('../../assets/img/PromCard/Newbear/card/1.jpg')
                //     this.init()
                //     break;
                //   case 2:
                //     if (this.$route.query.goods_id > 0) {
                //       this.bgimg = require('../../assets/img/newcard/2.jpg')
                //     } else {
                //       this.bgimg = require('../../assets/img/PromCard/Newbear/card/2.jpg')
                //     }
                //     this.init()
                //     break;
                //   case 3:
                //     if (this.$route.query.goods_id > 0) {
                //       this.bgimg = require('../../assets/img/newcard/3.jpg')
                //     } else {
                //       this.bgimg = require('../../assets/img/PromCard/Newbear/card/3.jpg')
                //     }
                //     this.init()
                //     break;
                //   case 4:
                //     if (this.$route.query.goods_id > 0) {
                //       this.bgimg = require('../../assets/img/newcard/4.jpg')
                //     } else {
                //       this.bgimg = require('../../assets/img/PromCard/Newbear/card/4.jpg')
                //     }
                //     this.init()
                //     break;
                //   case 5:
                //     if (this.$route.query.goods_id > 0) {
                //       this.bgimg = require('../../assets/img/newcard/5.jpg')
                //     } else {
                //       this.bgimg = require('../../assets/img/PromCard/Newbear/card/5.jpg')
                //     }
                //     this.init()
                //     break;
                // }
            }


        },
        components: {}
    }
</script>

<style scoped>
    @import "../../assets/css/views/PromCard/index.css";

    * {

    }
</style>
